export default function useMenu(data,containerRef){
    let dropComponent = null
    const dragenter = (e) => {
        e.dataTransfer.dropEffect = "move"
    }
    const dragover = (e) => {
        e.preventDefault()
    }
    const dragleave = (e) => {
        e.dataTransfer.dropEffect = "none"

    }
    const drop = (e) => {
            // console.log(888, data)
            data.value = {
                ...data.value,
                blocks: [
                    ...data.value.blocks,
                    {
                        left: e.offsetX,
                        top: e.offsetY,
                        zIndex: 1,
                        key: dropComponent.key,
                        selfAlignCenter:true,
                        props:{}
                    },
                ],
            }
            dropComponent = null
        
    }
    const dragStart = (e, component) => {
        // console.log(123, e, component)
        containerRef.value.addEventListener("dragenter", dragenter)
        containerRef.value.addEventListener("dragover", dragover)
        containerRef.value.addEventListener("dragleave", dragleave)
        containerRef.value.addEventListener("drop", drop)
        dropComponent = component
    }
    const drageEnd = (e) => {
        containerRef.value.removeEventListener("dragenter", dragenter)
        containerRef.value.removeEventListener("dragover", dragover)
        containerRef.value.removeEventListener("dragleave", dragleave)
        containerRef.value.removeEventListener("drop", drop)
    }
    return {
        dragStart,
        drageEnd
    }
}